<template>
    <Myhead title="找回密码"></Myhead>
    <div class="form">
        <div class="welcom">修改重置密码</div>
        <div class="box">
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请输入手机号' }]" />
                    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                        :rules="[{ required: true, message: '请输入验证码' }]">
                        <template #button>
                            <van-button size="small" type="primary" @click="send" :disabled=flag>{{ flag ? '剩余' +
                                time + '秒' : '发送验证码'
                            }}</van-button>
                        </template>
                    </van-field>
                    <van-field v-model="password" type="password" name="密码" label="新密码" placeholder="新密码"
                        :rules="[{ pattern, required: true, message: '请填写6-12位字母及数字组成的密码' }]" />
                </van-cell-group>
                <div class="btns">
                    <van-button @click="submit" type="primary" native-type="submit">
                        提交
                    </van-button>
                    <van-button @click="clean" type="danger">
                        重置
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { GetCodeLogin, FindUserInfo, UserVerifyCode, GetUserInfo, ChangeUseHead } from './userapi'
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const phone = ref('')
const router = useRouter()
const password = ref('')
const sms = ref('')
const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
const flag = ref(false)
const time = ref(60)


const getuseinfo = async () => {//获取用户信息
    const res = await GetUserInfo()
    console.log(res);
    if (res.data.code == 200) {
        phone.value = res.data.result.phone
    }
}

const changepas = async (params) => {//修改密码
    const res = await ChangeUseHead({ password: params })
    console.log(res);
    if (res.data.code == 200) {
        showToast({
            message: '修改成功'
        })
        //跳转
        router.push('/user/login')
    } else {
        showToast({
            message: res.data.msg
        })
    }
}
onMounted(() => {
    getuseinfo()
})

const countdown = () => {//倒计时
    flag.value = true
    let timer = null
    timer = setInterval(() => {
        time.value -= 1
        if (time.value == 0) {
            clearInterval(timer)
            time.value = 60
            flag.value = false
        }
    }, 1000)
}

const fyuser = async () => {//验证用户是否注册
    const res = await FindUserInfo({ phone: phone.value })
    if (res.data.code == 200) {

        if (res.data.result != null) {
            sendcode()
        } else {
            showToast({
                message: '手机号未注册'
            })
        }
    } else {
        showToast({
            message: '出错了'
        })
    }
}

const sendcode = async () => {//获取验证码
    const res = await GetCodeLogin({ phone: phone.value })
    if (res.data.code == 200) {
        showToast({
            message: '验证码发送成功'
        })
        countdown()
    } else {
        showToast({
            message: res.data.message
        })
    }
}
const send = () => {//发送按钮
    fyuser()
}
const verifycode = async () => {//验证验证码
    const res = await UserVerifyCode({ phone: phone.value, captcha: sms.value })
    if (res.data.code == 200) {
        //修改用户信息
        changepas(password.value)
    } else {
        showToast({
            message: '验证码输入错误'
        })
    }
}



const submit = () => {
    verifycode()
}
const clean = () => {

}
</script>

<style lang="scss">
.form {


    .welcom {
        font-size: 16px;
        color: #99A6C4;
        margin-left: 30px;
        line-height: 50px;
        width: 60%;
    }
}

.btns {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 40px;
}
</style>